<template>
    <a-drawer popup-container="#wrap" width="100%" :footer="false" :visible="show" :ok-loading="form.loading"
        @cancel="show = false" unmountOnClose>
        <template #title>
            {{ $t('components.detail.60zel0d2mq80') }}
        </template>
        <div class="detail-menu">
            <div class="info">
                <div class="info-title">
                    {{ $t('components.detail.60zel0d2p0s0') }}
                </div>
                <a-space direction="vertical" size="large">
                    <a-descriptions :data="data" align="right" />
                </a-space>
            </div>
            <div class="table">
                <div class="table-title">
                    {{ $t('components.detail.60zel0d2peo0') }}
                </div>
                <div class="table-scroll">
                    <c-table>
                        <a-table-column :title="$t('components.detail.60zel0d2plw0')" ellipsis tooltip :width="60">
                            <template #cell="{ rowIndex }">
                                {{ rowIndex + 1 }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2prs0')" ,ellipsis tooltip :width="120">
                            <template #cell="{ record }">
                                <span
                                    v-if="record.uavBasic.uavType === 1">{{ $t('components.detail.60zel0d2pxw0') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 2">{{ $t('components.detail.60zel0d2q5g0') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 3">{{ $t('components.detail.60zel0d2qc00') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 4">{{ $t('components.detail.60zel0d2qhc0') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 5">{{ $t('components.detail.60zel0d2qlw0') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 6">{{ $t('components.detail.60zel0d2qqg0') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 7">{{ $t('components.detail.60zel0d2qvg0') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 8">{{ $t('components.detail.60zel0d2qzw0') }}</span>
                                <span
                                    v-else-if="record.uavBasic.uavType === 9">{{ $t('components.detail.60zel0d2r4s0') }}</span>
                                <span v-else>{{ $t('components.detail.60zel0d2r9g0') }}</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="UASID" ellipsis tooltip :width="240">
                            <template #cell="{ record }">
                                {{ record.uavBasic.id ? record.uavBasic.id : '-' }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2re00')" ellipsis tooltip :width="150">
                            <template #cell="{ record }">
                                <a-tag color="#f53f3f"
                                    v-if="record?.status == 1">{{ $t('components.detail.60zel0d2rik0') }}</a-tag>
                                <a-tag color="#00b42a" v-else>{{ $t('components.detail.60zel0d2rn40') }}</a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2rrk0')" ellipsis tooltip :width="150">
                            <template #cell="{ record }">
                                {{ record.findTime ? dayjs.unix(record.findTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2rw80')" ellipsis tooltip :width="150">
                            <template #cell="{ record }">
                                {{ record.disappearTime ? dayjs.unix(record.disappearTime).format('YYYY-MM-DD HH:mm:ss')
                                    :
                                    '-' }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2s2g0')" ellipsis tooltip :width="300">
                            <template #cell="{ record }">
                                {{ record.uavLocation.lon }},{{ record.uavLocation.lat }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2s6k0')" ellipsis tooltip :width="100">
                            <template #cell="{ record }">
                                {{ record.uavLocation.alit }}°
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2sb40')" ellipsis tooltip :width="120">
                            <template #cell="{ record }">
                                {{ record.uavLocation.speedH }}
                            </template>
                        </a-table-column>
                        <a-table-column :title="$t('components.detail.60zel0d2seo0')" ellipsis tooltip :width="150">
                            <template #cell="{ record }">
                                {{ record.stopTime ? dayjs.unix(record.stopTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
                            </template>
                        </a-table-column>
                    </c-table>
                </div>
            </div>

        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { ref } from 'vue';
import dayjs from 'dayjs'
const local = useLocal()
import { apiSpectTrack } from '@/api/index'
import slider from '@arco-design/web-vue/es/slider';
const show = defineModel('show', { default: false })
const detail = defineModel('data', { default: {} })
const emit = defineEmits(['refresh'])
const scene = ref();
onBeforeUnmount(() => {
    scene.value?.destroy()
})
const data = [{
    label: 'Name',
    value: 'Socrates',
}, {
    label: 'Mobile',
    value: '123-1234-1234',
}, {
    label: 'Residence',
    value: 'Beijing'
}, {
    label: 'Hometown',
    value: 'Beijing',
}, {
    label: 'Address',
    value: 'Yingdu Building, Zhichun Road, Beijing'
}];
const form = reactive({
    loading: false,
    mounted: false,
    uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
    data: {} as any,
    points: []
})
// 无人机侦测记录详情
const getData = async () => {
    form.loading = true
    const { code, data } = await apiSpectTrack({
        deviceId: form.data?.uavBasic?.id,
        startTime: Number(dayjs().subtract(7, 'day').format('X')),
        endTime: Number(dayjs().format('X')),
    })
    form.loading = false
    if (code != 200) return
    form.points = data
    // console.log(data)
}
useWatch(show, (val: boolean) => {
    if (val) {
        form.data = {
            ...detail.value
        }
        getData()
    } else {
        slider.value = 0
        stop()
        setTimeout(() => {
            form.mounted = false
            nextTick(() => {
                form.mounted = true
            })
        }, 500);
    }
})
</script>

<style lang="less" scoped>
.detail-menu {
    display: flex;
    flex-direction: column;

    .info {
        height: 150px;

        .info-title {
            height: 40px;
            display: flex;
            font-size: 18px;

        }
    }

    .table {

        .table-title {
            height: 40px;
            display: flex;
            font-size: 18px;
        }

        .table-scroll {
            height: 550px;
            width: 100%;
            background-color: #fff;
        }
    }
}
</style>